<script setup>
import {ref} from "vue";
import AllModal from "@/pages/Users/roles/AllModal.vue";
import RoleModal from "@/pages/Users/roles/RoleModal.vue";
const accountsList = ref([
  {id: 1, email: 'admin@hydrogen.ai', role: 'Admin', password: '1234567ghy', show: false},
  {id: 2, email: 'huayin.hsien@hydrogen.ai', role: 'Admin', password: '1234567ghy', show: true},
  {id: 3, email: 'andre.waldemar@hydrogen.ai', role: 'Manager', password: '1234567ghy', show: false},
  {id: 4, email: 'security1@hydrogen.ai', role: 'Security', password: '1234567ghy', show: false},
  {id: 5, email: 'security2@hydrogen.ai', role: 'Security', password: '1234567ghy', show: false},
  {id: 11, email: 'admin@hydrogen.ai', role: 'Admin', password: '1234567ghy', show: false},
  {id: 22, email: 'huayin.hsien@hydrogen.ai', role: 'Admin', password: '1234567ghy', show: true},
  {id: 33, email: 'andre.waldemar@hydrogen.ai', role: 'Manager', password: '1234567ghy', show: false},
  {id: 44, email: 'security1@hydrogen.ai', role: 'Security', password: '1234567ghy', show: false},
  {id: 55, email: 'security2@hydrogen.ai', role: 'Security', password: '1234567ghy', show: false},
])
const AddRoleRef = ref(null)
const roleTitle = ref('')
const AddShow = text => {
  roleTitle.value = text
  AddRoleRef.value.showModal()
}
const roleIndex = ref(1);
const roles = ref([
  {id: 1, name: 'Admin'},
  {id: 2, name: 'Manager'},
  {id: 3, name: 'Security'},
])
</script>

<template>
  <div class="w-full h-[91px] flex flex-row items-center justify-between s2k:h-[121.3px] s4k:h-[182px] border-b border-solid border-[var(--grid)]">
    <div class="ml-[24px] s2k:ml-[32px] s4k:ml-[48px] flex flex-col">
      <span class="text-[2rem] text-[var(--theme-font-color)] font-[600] font-Inter">User Roles</span>
      <span class="text-[1.13rem] text-[var(--theme-font-desc-color)] mt-[3px] s2k:mt-[4px] s4k:mt-[6px]">Create and manage User Roles</span>
    </div>
    <div class="w-[127px] h-[41px] flex flex-row items-center justify-center bg-[#1C64F2] cursor-pointer rounded-md s4k:rounded-[16px] mr-[24px] s2k:mr-[32px] s4k:mr-[48px]
    s2k:w-[169.3px] s2k:h-[54.6px] s4k:w-[254px] s4k:h-[82px]" @click="AddShow('Add')">
      <svg-icon name="add" class="svgLogo s2ksvg s4ksvg ml-[3px] s4k:ml-[6px]" width="14px" height="14px"></svg-icon>
      <span class="text-[1.167rem] text-white font-Medium font-[400] ml-[10px] mr-[4px] s4k:ml-[20px] s4k:mr-[12px]">Add Role</span>
    </div>
  </div>
  <div class="flex flex-row h-[calc(100vh_-_199px)] s2k:h-[calc(100vh_-_265.3px)] s4k:h-[calc(100vh_-_398px)]">
    <div class="h-full w-[325px] border-r border-solid border-[var(--grid)] s2k:w-[433.3px] s4k:w-[650px]">
      <div class="w-full h-[56px] flex flex-row items-center cursor-pointer border-b border-solid border-[var(--grid)] hover:bg-[var(--theme-hover)] s2k:h-[74.6px] s4k:h-[112px]"
         :class="roleIndex === v.id ? 'themeHover' : ''"
         @click="roleIndex = v.id"
         v-for="v in roles" :key="v.id">
        <svg-icon name="role" class="svgClass s2ksvg s4ksvg ml-[16px] mr-[12px] s2k:ml-[21.3px] s4k:ml-[32px] s2k:mr-[16px] s4k:mr-[24px]" width="16px" height="16px"></svg-icon>
        <span class="text-[1.13rem] text-[var(--theme-font-color)]">{{v.name}}</span>
      </div>
    </div>
    <div class="h-full w-[calc(100%_-_325px)] s2k:w-[calc(100%_-_433.3px)] s4k:w-[calc(100%_-_650px)]">
      <div class="h-[99px] s2k:h-[132px] s4k:h-[198px] w-full border-b border-solid border-[var(--grid)] flex flex-row justify-between items-center">
        <div class="ml-[24px] s2k:ml-[32px] s4k:ml-[48px]">
          <p class="text-[2rem] text-[var(--theme-font-color)]">Admin</p>
          <p class="text-[1.13rem] text-[var(--theme-font-desc-color)] mt-[3px] s2k:mt-[4px] s4k:mt-[6px]">You are currently assigned this user role. </p>
        </div>
        <div class="flex flex-row justify-end mr-[24px] s2k:mr-[32px] s4k:mr-[48px]">
          <div class="flex flex-row justify-center items-center w-[89px] h-[41px] bg-[var(--theme-button-bg)] rounded-[8px] cursor-pointer s2k:w-[118.6px] s4k:w-[178px] s2k:h-[54.6px] s4k:h-[82px] s4k:rounded-[16px]" @click="AddShow('Edit')">
            <svg-icon name="edit" class="text-[var(--iconControl)] s2ksvg s4ksvg mr-[8px] s2k:mr-[10.6px] s4k:mr-[16px]" width="14px" height="14px"></svg-icon>
            <span class="text-[1.13rem] text-[var(--theme-font-color)]">Edit</span>
          </div>
          <div class="flex flex-row justify-center items-center w-[153px] h-[41px] bg-[var(--theme-button-bg)] rounded-[8px] cursor-pointer ml-[8px] s2k:w-[204px] s4k:w-[306px]  s2k:h-[54.6px] s4k:h-[82px] s2k:ml-[10.6px] s4k:ml-[16px] s4k:rounded-[16px]">
            <svg-icon name="assign" class="text-[var(--iconControl)] s2ksvg s4ksvg mr-[8px] s2k:mr-[10.6px] s4k:mr-[16px]" width="14px" height="14px"></svg-icon>
            <span class="text-[1.13rem] text-[var(--theme-font-color)]">Assign Users</span>
          </div>
        </div>
      </div>
      <div class="list w-full h-[calc(100%_-_99px)] s2k:h-[calc(100%_-_132px)] s4k:h-[calc(100%_-_198px)] flex flex-col items-center">
        <AllModal />
      </div>
    </div>
    <RoleModal ref="AddRoleRef" :roleTitle="roleTitle" role="Manager"/>
  </div>
</template>

<style scoped lang="scss">
.list::-webkit-scrollbar-track {
  background-color: var(--theme);
  border-radius: 10px;
}
#input {
  width: 80%;
  padding: 0;
  font-size: 1.13rem;
  color: #9CA3AF;
  background: var(--theme);
  border: solid 1px var(--theme);
  border-radius: 8px;
  margin-top: 6px;
  &:focus {
    outline: none;
    box-shadow: inset 0 0;
  }
}
@media screen and (min-width: 2560px) {
  .s2ksvg{
    transform: scale(1.3) !important;
  }
}
@media screen and (min-width: 3840px) {
  .s4ksvg {
    transform: scale(2) !important;
  }
  //.s4ksvgeye{
  //  transform: scale(1) !important;
  //}
}
</style>